<template>
	<div class="system-dept-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<div class="system-dept-search mb15">
				<el-form :inline="true" :model="dataForm">
					<el-form-item>
						<el-select @change="filterChange" clearable filterable v-model="dataForm.region_id" placeholder="区域名称" style="width: 180px;">
							<el-option v-for="item in selectData.regionData" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-select @change="filterChange" clearable filterable v-model="dataForm.road_id" placeholder="道路名称" style="width: 180px;">
							<el-option v-for="item in selectData.roadData" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item><el-input size="default" v-model="dataForm.name" placeholder="路段名称" style="max-width: 180px"> </el-input></el-form-item>
					<el-form-item>
						<el-select @change="filterChange" clearable v-model="dataForm.status" placeholder="启用状态" style="width: 180px;">
							<el-option label="启用" :value="1"></el-option>
							<el-option label="停用" :value="0"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item><el-button size="default" type="primary" class="ml10" @click="onSearch">查询</el-button></el-form-item>
					<el-form-item v-if="getAuthClick('basic-location-create')"><el-button size="default" type="success" class="ml10" @click="onOpenAddDept()">添加</el-button></el-form-item>
				</el-form>
			</div>
			<el-table
				:data="state.tableData.data"
				v-loading="state.tableData.loading"
				style="width: 100%;"
				row-key="id"
				default-expand-all
				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
			>
				<el-table-column align="center" prop="number" label="路段编号" show-overflow-tooltip> </el-table-column>
				<el-table-column align="center" prop="name" label="路段名称" show-overflow-tooltip> </el-table-column>
				<el-table-column align="center" prop="direction" label="路段方向" show-overflow-tooltip>
					<template #default="scope">
						<div>
							<div v-if="scope.row.direction==1">南北走向</div>
							<div v-if="scope.row.direction==2">东西走向</div>
							<div v-if="scope.row.direction==3">东北西南走向</div>
							<div v-if="scope.row.direction==4">西北东南走向</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="region.name" label="所属区域" show-overflow-tooltip align="center"></el-table-column>
				<el-table-column prop="road.name" label="所属道路" show-overflow-tooltip align="center"></el-table-column>
				<el-table-column align="center" prop="status" label="启用状态" show-overflow-tooltip>
					<template #default="scope">
						<div>
							<el-link type="danger" v-if="scope.row.status==0">停用</el-link>
							<el-link type="success" v-if="scope.row.status==1">启用</el-link>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="created_at" label="创建时间" align="center" />
				<el-table-column label="操作" show-overflow-tooltip  align="center">
					<template #default="scope">
						<el-button v-if="showUpdataClick" size="small" text type="primary" @click="onOpenEditDept( scope.row)">编辑</el-button>
						<el-button v-if="showDeleteClick" size="small" text type="danger" @click="onTabelRowDel(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="display: flex; justify-content: flex-end;margin-right:30px">
				<el-pagination
				 style="margin-top:20px;"
				  background layout="prev, pager, next" 
				  :current-page="dataForm.page"
				  :page-size="dataForm.limit"
				  @current-change="handleCurrentChange"
				  :total="total" />
			</div>
		</el-card>
		<DeptDialog ref="deptDialogRef" @refresh="getTableList()" :tableData="tableData" :disabled="disabled" />
		<editDialog ref="editDialogRef" @refresh="getTableList()" :tableData="tableData" :disabled="disabled" />
	</div>
</template>

<script setup lang="ts" name="systemDept">
import { defineAsyncComponent, ref, reactive, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { deptApi } from '/@/api/system/dept/index';
import {useRoleApi} from "/@/api/system/role/index"
import {useBasicApi} from "/@/api/system/menu/index"

import {useUserInfo} from "/@/stores/userInfo"

	const userInfo = useUserInfo();
	const permissions=userInfo.userInfos.permissions
	// 判断是否存在组件userInfo.userInfos.permissions
	const getAuthClick=(set:string)=>{
		let sert=permissions.findIndex((item)=>
		item==set
	)
	
	return sert>=0?true:false
	}
	 const showUpdataClick=ref(getAuthClick('basic-location-update'))
	 const showDeleteClick=ref(getAuthClick('basic-location-delete'))

const BasicApi = useBasicApi()
const RoleApi = useRoleApi()
const depApi = deptApi()
// 引入组件
const DeptDialog = defineAsyncComponent(() => import('/@/views/basic/location/dialog.vue'));
const editDialog = defineAsyncComponent(() => import('/@/views/basic/location/editDialog.vue'));
const tableData =ref({})
// 定义变量内容
const deptDialogRef = ref();
const disabled = ref<Boolean>(false)
const total = ref(1)
// dx定义
const dataForm = ref({
	region_id:"",
	road_id:"",
	name:"",
	status:"",
	page:1,
	limit:10,
	include: "region;road",
	search:""
})
const ruleForm = ref({
	number:"",
	name:"",
	status:null,
	direction:null,
	region_name:"",
	road_name:"",
	created_at:"",
})
const searchForm = ref({search:''})
const selectData = reactive({
	regionData:[],
	intersectionData:[],
	roadData:[],
	locationData:[],
	monitorPoleData:[]
})
// 区域名称和道路名称的数据
const getSelectData = (async ()=>{
	searchForm.value.search = `status:1`
	let res = await BasicApi.BasicTableApi(searchForm.value);
	if(res.isSuccess){
		selectData.regionData = res.returnData
	}
	let roadRes = await RoleApi.RoleTableApi(searchForm.value);
	if(roadRes.isSuccess){
		selectData.roadData = roadRes.returnData
	}
})
const filterChange = () =>{
	if(dataForm.value.region_id==undefined){
			dataForm.value.region_id=''
		}
		if(dataForm.value.status==undefined){
			dataForm.value.status=''
		}
		if(dataForm.value.road_id==undefined){
			dataForm.value.road_id=''
		}
}

// 查询按钮
const onSearch = (async ()=>{
		dataForm.value.search=`status:${dataForm.value.status};name:${dataForm.value.name}:like;region_id:${dataForm.value.region_id};road_id:${dataForm.value.road_id};`
		getTableList()
})
// 获取表格列表
const getTableList = (async ()=>{
	state.tableData.loading = true
	let res = await depApi.getDepList(dataForm.value);
	if(res.isSuccess){
		state.tableData.data = res.returnData.data
		state.tableData.loading = false
		total.value = res.returnData.total
		dataForm.value.page = res.returnData.current_page
	}
})

const handleCurrentChange = (val:number)=>{
	dataForm.value.page = val
	getTableList()
}



const state = reactive<SysDeptState>({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			pageNum: 1,
			pageSize: 10,
		},
	},
});

// 初始化表格数据
const editDialogRef = ref()
// 打开新增菜单弹窗
const onOpenAddDept = () => {
	disabled.value = false
	tableData.value = ruleForm.value
	deptDialogRef.value.openDialog();
};
// 打开编辑菜单弹窗
const onOpenEditDept = ( row: DeptTreeType) => {
	disabled.value = true
	tableData.value =row
	editDialogRef.value.openDialog();
};
// 删除当前行
const onTabelRowDel = (row:object) => {
	ElMessageBox.confirm(`此操作将永久删除此数据，是否继续?`, '提示', {
	confirmButtonText: '确认',
	cancelButtonText: '取消',
	type: 'warning',
	})
		.then(async() => {
			let res = await depApi.delDep({id:row.id});
			if(res.isSuccess){
				ElMessage.success('删除成功');
				getTableList()
			}else{
				ElMessage.error('删除失败')
			}
		})
		.catch(() => {});
};
// 页面加载时
onMounted(() => {
	getTableList()
	getSelectData()
});
</script>


<style>
.el-input{
	height: 40px;
}
.el-button{
	height: 40px;
}

</style>
